<template>
	<u-modal :show="show" :showCancelButton="true" :confirm-text="confirmText" :confirmColor="confirmColor"
		:cancel-text="cancelText" @confirm="onConfirm" @cancel="onCancel">
		<template #default>
			<view class="agreement-modal">
				<view class="agreement-title">{{title}}</view>
				<scroll-view class="agreement-content" scroll-y="true">
					<view class="agreement-text">
						<slot>
							<!-- 默认内容将在这里显示 -->
							<text class="company-info">甲方：北京平安优享互联网科技有限公司</text>
							<text class="company-info">乙方：</text>

							<text class="agreement-intro">
								根据《中华人民共和国计算机信息系统安全保护条例》以及其他相关法律法规规定，乙方在浏览甲方网站时，乙方不得利用甲方网站进行违法犯罪活动。据此双方签订本协议：
							</text>

							<text class="section-title">一、乙方承诺不利用甲方网站制作、复制、发布、转摘、传播含有下列内容的信息：</text>
							<text class="clause-item">（一）反对宪法基本原则的；</text>
							<text class="clause-item">（二）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</text>
							<text class="clause-item">（三）损害国家荣誉和利益的；</text>
							<text class="clause-item">（四）煽动民族仇恨、民族歧视，破坏民族团结的；</text>
							<text class="clause-item">（五）破坏国家宗教政策，宣扬邪教和封建迷信活动的；</text>
							<text class="clause-item">（六）散布谣言，扰乱社会秩序，破坏社会稳定的；</text>
							<text class="clause-item">（七）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</text>
							<text class="clause-item">（八）侮辱或者诽谤他人，侵害他人权益的；</text>
							<text class="clause-item">（九）涉嫌参与洗钱、套现、赌博、测录等违法犯罪活动的；</text>
							<text class="clause-item">（十）含有法律法规禁止的其他内容的；</text>

							<text class="section-title">二、乙方不得利用甲方网络侵犯国家的、社会的、集体的利益和公民的合法权益。</text>

							<text
								class="section-title">三、乙方不得利用甲方网络系统发送垃圾信息、攻击其他网络和计算机系统，传播计算机病毒，以及其他危害互联网信息安全的行为。</text>

							<text class="section-title">四、乙方不得通过甲方网站传播不负责任、造谣滋事、煽动偏激情绪、制造恐慌气氛、扰乱正常工作秩序等各种有害信息。</text>

							<text class="section-title">五、乙方应当时刻提高保密意识，不得与无关的任何人在网站上发布、谈论和传播我司机密信息。</text>

							<text class="section-title">六、乙方违反上述规定情节严重的，甲方有权终止所有与我司相关的服务协议，构成犯罪的送交司法机关并承担相应的法律责任。</text>

							<text class="final-note">最终解释权归北京平安优享互联网科技有限公司</text>
						</slot>
					</view>
				</scroll-view>
			</view>
		</template>
	</u-modal>
</template>

<script>
	export default {
		name: 'SecurityAgreementModal',
		props: {
			// 控制模态框显示
			show: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: '网站安全保密协议书'
			},
			// 确认按钮文本
			confirmText: {
				type: String,
				default: '我已阅读并同意'
			},
			// 确认按钮颜色
			confirmColor: {
				type: String,
				default: 'red'
			},
			// 取消按钮文本
			cancelText: {
				type: String,
				default: '取消'
			}
		},
		methods: {
			// 点击确认按钮
			onConfirm() {
				this.$emit('confirm');
			},
			// 点击取消按钮
			onCancel() {
				this.$emit('cancel');
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 安全协议弹窗样式 */
	.agreement-modal {
		max-height: 70vh;
		padding: 20rpx 20rpx 0;

		.agreement-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			padding-bottom: 20rpx;
		}

		.agreement-content {
			max-height: 50vh;

			.agreement-text {
				line-height: 1.6;

				.company-info {
					display: block;
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}

				.agreement-intro {
					display: block;
					font-size: 26rpx;
					color: #666;
					text-indent: 2em;
				}

				.section-title {
					display: block;
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					// margin: 25rpx 0 15rpx 0;
				}

				.clause-item {
					display: block;
					font-size: 26rpx;
					color: #666;
					// margin-bottom: 10rpx;
					padding-left: 20rpx;
				}

				.final-note {
					display: block;
					font-size: 26rpx;
					color: #999;
					text-align: center;

				}
			}
		}
	}

	::v-deep .u-modal__content {
		padding: 0 !important;
	}
</style>